<template>
  <div>
    <el-table
      :data="settleForUserList"
      style="width: 100%"
      stripe
      border
      header-row-class-name="base-table-header-v3"
      row-class-name="base-table-row-v3"
      v-tooltip
      v-loading="loading"
    >
      <el-table-column :label="$t('common.label.balanceNo')" prop="eventNo" min-width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <a
            :href="`/pcResourceManage/settleDetailView?id=${scope.row.id}`"
            :data-id="scope.row.id"
            @click="openDetail"
            class="task-link">
            {{scope.row.settleNo}}
          </a>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.label.balanceType')" prop="module">
        <template slot-scope="scope">
          {{ settleTypeSys[scope.row.module - 1] }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.base.serviceProvider')" prop="tagName" show-overflow-tooltip></el-table-column>
      <el-table-column :label="$t('common.label.balanceTotal')" sortable prop="amount">
        <template slot-scope="scope">
          {{ scope.row.amount }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.base.status')" prop="stateName">
        <template slot-scope="scope">
          <div
            v-if="scope.row.stateName"
            class="view-approval"
            :style="{background: `${settleStatus[scope.row.stateName]}`}">
            {{ scope.row.stateName }}
          </div>
        </template>
      </el-table-column>

      <el-table-column :label="$t('common.time.processTime.balanceTime')" sortable prop="settleTime">
        <template slot-scope="scope">
          {{ scope.row.settleTime | fmt_datetime }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.label.balancer')" prop="settleUser">
        <template slot-scope="scope">
          {{ scope.row.settleUserName }}
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="base-pagination"
      :background="true"
      layout="total, prev, pager, next"
      :total="total"
      :page-size="pageInfo.pageSize"
      :current-page="pageInfo.pageNum"
      @current-change="jump"
    >
    </el-pagination>
  </div>
</template>

<script>
import * as serviceProviderHomeApi from '@src/api/serviceProviderHomeApi';
import { formatDate } from 'pub-bbx-utils';
import { safeNewDate } from '@src/util/time';
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
export default {
  name: 'service-settle-list',
  props: {
    detailId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      settleTypeSys:[this.$t('common.tabs.balanceTask'), this.$t('common.tabs.purchaseBalanceTask'), this.$t('common.tabs.returnBalanceTask')],
      settleStatus: {'未结算': '#FF7043', '已结算': '#C0CA33', '已取消': '#BDBDBD', '已付款': '#00C853'},
      settleForUserList: [], // 成员列表
      pageInfo: {
        // 分页
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, // 总数
      loading: false
    };
  },
  mounted() {
    this.getServiceSettleList();
  },
  methods: {
    // 服务商结算单列表
    getServiceSettleList() {
      this.loading = true;
      serviceProviderHomeApi.getServiceSettleList({
        departIds: [this.detailId],
        ...this.pageInfo,
      }).then((res) => {
        if(res.result) {
          this.settleForUserList = res.result.list || [];
          this.settleForUserList.forEach(item => {
            item.settleTime = item.settleTime && formatDate(safeNewDate(parseInt(item.settleTime)), 'yyyy-MM-dd HH:mm:ss')
          })
          this.total = res.result.total;
        }
      }).catch(e=>{
        console.error('fetch settle caught e', e)
      }).finally(() => {
        this.loading = false;
      })
    },
    jump(e) {
      this.pageInfo.pageNum = e;
      this.getServiceSettleList();
    },
    // 跳转结算单详情
    openDetail(event){
      event.preventDefault();
      if (!window.frameElement) return;
      let el = event.target;
      // this.$platform.openTab({
      //   close: true,
      //   id: `settle_view_${el.dataset.id}`,
      //   title: '结算单详情',
      //   url: `/pcResourceManage/settleDetailView?id=${el.dataset.id}`,
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PagePcResourceManage,
        key: el.dataset.id,
        params: `id=${el.dataset.id}`,
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.task-link {
  @include fontColor();
}
.view-approval {
  width: 52px;
  height: 22px;
  line-height: 22px;
  background: #00C853;
  border-radius: 11px;
  text-align: center;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
}
</style>